<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="va-icon-vuestic"
    width="304"
    height="60"
    viewBox="0 0 304 60"
  >
    <defs>
      <linearGradient :id="'ORIGINAL'" x1="0%" y1="50%" y2="50%">
        <stop offset="0%" stop-color="#4AE387"/>
        <stop offset="100%" stop-color="#C8EA13"/>
      </linearGradient>
      <linearGradient :id="'CORPORATE'" x1="0%" y1="50%" y2="50%">
        <stop offset="0%" stop-color="#74BBFF"/>
        <stop offset="100%" stop-color="#6E85E8"/>
      </linearGradient>
    </defs>
    <g
      fill="none"
      fill-rule="evenodd"
      transform="scale(2)"
    >
      <path
        :fill="`url(#${themeGradientId})`"
        fill-rule="nonzero" />
      <!--        d="M38.052,26.644V25.619h9.106V26.6h3.2V18.929a16.642,16.642,0,0,0,2.759,1.343q0.44-.879,1.66-2.954a13.863,13.863,0,0,1-6.189-3.394h5.945V11.458H41.678q0.33-.61.61-1.245H52.7V7.8H43.069l0.293-1.245H53.531V4.085H43.839q0.146-.842.268-1.709H40.836q-0.1.879-.22,1.709H31.68V6.551h8.411q-0.171.635-.378,1.245H32.559v2.417h6.165q-0.33.647-.708,1.245H30.728v2.466h5.31a18.094,18.094,0,0,1-5.6,3.76,28.271,28.271,0,0,1,2.051,2.759q1.245-.708,2.368-1.489v7.691h3.2Zm8.362-11.157H38.834q0.683-.757,1.282-1.562h5.176a15.868,15.868,0,0,0,1.123,1.563h0Zm0.745,3.906H38.052V17.879h9.106v1.514Zm-9.106,2.319h9.106v1.514H38.052V21.712ZM56.021,5.867H73.648v7.349H76.92V5.867h2.466V3.377H56.021v2.49Zm2.124,6.714H70.963V7.015H58.145v5.566Zm3-2.149V9.163H67.96v1.27H61.148ZM57.755,24.886h3.223V23.714h8.081q0.33,1.465.537,2.856,2.136,0,3.87-.024a3.818,3.818,0,0,0,2.618-.842,3.181,3.181,0,0,0,.885-2.454V16.341h2.759V13.753H55.606v2.588H73.7v5.615a1.3,1.3,0,0,1-1.538,1.392q-0.342,0-1.221-.049V17.66H57.755v7.226Zm3.223-3.369v-1.66h6.738v1.66H60.977ZM81.29,4.964q1.685,1.392,3.687,3.2l2.173-2.307v0.33H92.3V8.48H87.637V26.571h3.076V25.326h10.035v1.245h3.076V8.48h-4.59V6.185h5.371V3.451H87.149V5.709q-1.4-1.172-3.833-2.917ZM95.035,6.185H96.5V8.48H95.035V6.185ZM96.5,11.117v2.954q0,2.979,2.783,2.978h1.465v1.392H90.714V15.963q0.842,0.7,2.026,1.892a11.71,11.71,0,0,0,2.222-6.738H96.5Zm2.734,2.368V11.117h1.514v3.345h-0.562a0.852,0.852,0,0,1-.952-0.976h0Zm-8.52-2.368h1.5a7.951,7.951,0,0,1-1.5,4.358V11.117Zm0,9.863h10.035v1.709H90.714V20.98Zm-10.23-9.644q1.855,1.563,4,3.565l2.27-2.515Q85.2,11.019,82.486,8.944ZM80.826,25.2q1.587,0.391,3.369.977,1.294-3.833,2.588-9.253a28.405,28.405,0,0,1-3.271-1.1Q82.144,21.42,80.826,25.2h0Zm29.98-17.187h18.726v-3H121.3q-0.537-1.379-1.074-2.661l-3.979.928q0.378,0.842.744,1.733H107.51V13.07q0.073,7.5-2.05,11.206a31.158,31.158,0,0,1,2.832,2.368q2.514-3.918,2.514-13.135V8.016ZM117.4,15.56h-5.151V26.351h3.3V24.813h9.2v1.538h3.3V15.56h-7.276V13.338h8.325v-2.93h-8.325V8.382H117.4V15.56Zm7.349,6.323h-9.2V18.49h9.2v3.393Z"-->

    </g>
  </svg>
</template>
<script>

export default {
  name: 'VaIconVuestic',
  inject: ['contextConfig'],
  computed: {
    themeGradientId () {
      return this.contextConfig.invertedColor ? 'CORPORATE' : 'ORIGINAL'
    },
    textColor () {
      return this.contextConfig.invertedColor ? '#6E85E8' : '#E4FF32'
    },
  },
}
</script>

<style lang="scss">
.va-icon-vuestic {
  .st0 {
    fill: #4ae387;
  }
}
</style>
